<template>
  <div class="page-info">
    <div class="search">
      <div class="search-box">
        <a-form
          :model="searchInfo"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item
                :name="labelMap['packageName'].name"
                :label="labelMap['packageName'].label"
              >
                <a-input
                  style="width: 90%; margin-left: 8px"
                  v-model:value="searchInfo.packageName"
                  :placeholder="'请填写' + labelMap['packageName'].label"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col style="text-align: right; margin-bottom: 20px">
              <a-space>
                <a-button type="primary" @click="query"> 查找</a-button>
                <a-button type="primary" @click="cancelQuery">清空</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="button" style="margin: 10px">
      <a-space>
        <a-button type="primary" @click="editRechargePackageInfo('add')"
          >新增</a-button
        >
        <a-button type="primary" danger @click="batchDelRechargePackageInfo"
          >删除</a-button
        >
      </a-space>
    </div>
    <div class="content">
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :loading="loading"
        :row-key="(record) => record.id"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ y: 500 }"
        :row-selection="rowSelection"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-button
                type="primary"
                size="small"
                @click="editRechargePackageInfo('update', record.id)"
                >编辑</a-button
              >
              <a-popconfirm
                title="确认删除?"
                ok-text="确认"
                cancel-text="取消"
                @confirm="delRechargePackageInfo(record.id)"
                @cancel="cancel"
              >
                <a-button type="primary" size="small" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
            <span></span>
          </template>
        </template>
      </a-table>
      <RechargePackageInfoDetail
        ref="editInfo"
        :open="visible"
        :modelInfo="modelInfo"
        @handleOk="handleOk"
        @handleCancel="handleCancel"
      ></RechargePackageInfoDetail>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  SearchInfo,
  pagination,
  columns,
  DataItem,
  ModelInfo,
  pageInfo,
} from "./rechargePackageInfoListTs";
import {
  getRechargePackageInfoPage,
  deleteRechargePackageInfo,
} from "@/api/commonInfo/rechargePackageInfo/rechargePackageInfoTs";
import { message } from "ant-design-vue";

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let rowIds = [] as any;

const rowSelection = ref({
  checkStrictly: false,
  onChange: (
    selectedRowKeys: (string | number)[],
    selectedRows: DataItem[]
  ) => {
    rowIds = selectedRowKeys;
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: DataItem[],
    changeRows: DataItem[]
  ) => {
    console.log(selected, selectedRows, changeRows);
  },
});

const labelMap = ref<any>({
  packageName: { name: "packageName", label: "套餐名称" },
  amount: { name: "amount", label: "充值金额" },
  bonusAmount: { name: "bonusAmount", label: "赠送金额" },
  sortOrder: { name: "sortOrder", label: "排序顺序" },
});

let searchInfo = ref<SearchInfo>({});

const cancelQuery = (): void => {
  searchInfo.value = {};
};

const query = (): void => {
  getRechargePackageInfoListPage(searchInfo.value, pagination.value);
};

const handleTableChange = (pagination): void => {
  getRechargePackageInfoListPage(searchInfo.value, pagination);
};

const delRechargePackageInfo = (ids: string): void => {
  deleteRechargePackageInfo(ids).then((res) => {
    if (res.code == "200") {
      message.success((res && "删除" + res.message) || "删除成功！", 3);
      getRechargePackageInfoListPage(searchInfo.value, pagination.value);
    } else {
      message.error((res && res.message) || "删除失败！", 3);
    }
  });
};

const batchDelRechargePackageInfo = (): void => {
  let ids = "";
  if (rowIds && rowIds.length > 0) {
    rowIds.forEach((item: string) => {
      ids += item + ",";
    });
    ids = ids.substring(0, ids.length - 1);
  } else {
    message.warning("请先选择数据！", 3);
    return;
  }
  delRechargePackageInfo(ids);
};

let loading = ref<boolean>(false);

let dataSource = ref();

const cancel = (e: MouseEvent): void => {
  console.log(e);
};

const getRechargePackageInfoListPage = (
  param: SearchInfo,
  cur: pageInfo
): void => {
  loading.value = true;
  getRechargePackageInfoPage(param, cur.current, cur.pageSize)
    .then((res) => {
      if (res.code == "200") {
        dataSource.value = res.data.records;
        pagination.value.current = res.data.current;
        pagination.value.pageSize = res.data.size;
        pagination.value.total = res.data.total;
      } else {
        message.error((res && res.message) || "查询列表失败！");
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const init = (): void => {
  //获取充值套餐配置表页面数据
  getRechargePackageInfoListPage(searchInfo.value, pagination.value);
};

init();

let visible = ref<boolean>(false);

let modelInfo = ref<ModelInfo>({});

//新增和修改弹窗
const editRechargePackageInfo = (type: string, id?: number): void => {
  if (type == "add") {
    modelInfo.value.title = "新增明细";
    modelInfo.value.id = undefined;
  } else if (type == "update") {
    modelInfo.value.title = "修改明细";
    modelInfo.value.id = id;
  }
  modelInfo.value.confirmLoading = true;
  visible.value = true;
};

const handleOk = (v: boolean): void => {
  visible.value = v;
  getRechargePackageInfoListPage(searchInfo.value, pagination.value);
};

const handleCancel = (v: boolean): void => {
  visible.value = v;
};
</script>
<style lang="scss" scoped></style>
